//- Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
//- 
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//- 
//-     http://www.apache.org/licenses/LICENSE-2.0
//- 
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.

extends layout

block content
  h1 💡 Please Login First
  form.login-form
    input.username(type="text" name="username" placeholder="Username")
    input.password(type="password" name="password" placeholder="Password") 
    button.login-btn(type="submit") Login
    .error-message
    a.register-link(href="/register") Need an account? Register
  
  link(rel="stylesheet", href="/css/login.css")
  script.
    const form = document.querySelector('.login-form')
    const username = form.querySelector('.username')
    const password = form.querySelector('.password') 
    const error = form.querySelector('.error-message')

    form.addEventListener('submit', async (e) => {
      e.preventDefault()
      
      const res = await fetch('/api/auth', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: username.value,
          password: password.value
        })
      })

      const data = await res.json()

      if (data.success) {
        window.location.href = '/'
      } else {
        error.textContent = 'Login Failed'
      }
    })